<div id="pageTip" class="page-tip">没有更多了</div>
<div class="page-empty"></div>
<div id="pageBar" class="page-bar">
	<div id="pagePrev" class="page-btn page-left" onclick="queryPrevPage()">上一页</div>
	<div class="page-num"><span id="pageThis" class="page-this">X</span> / <span id="pageAll">XX</span></div>
	<div id="pageNext" class="page-btn page-right" onclick="queryNextPage()">下一页</div>
</div>
<input type="text" id="page" value="1" class="display-none" />
<input type="text" id="allpages" class="display-none" />

<script type="text/javascript">
	function initPageBar(allpages) {
		var page = parseInt(getValue('page'));

		setClass('pagePrev', page == 1 ? 'page-btn-invalid page-left' : 'page-btn page-left');
		setClass('pageNext', page == allpages ? 'page-btn-invalid page-right' : 'page-btn page-right');

	    setValue('allpages', allpages);

	    setHtml('pageTip', page == allpages ? '没有更多了' : '点击<span class="page-next" onclick="queryNextPage()">【下一页】</span>查看更多');
	    setHtml('pageThis', getValue('page'));
	    setHtml('pageAll', allpages);
	}

	function resetPageBar(flag) {
	    if (flag != 'page') {
	        setValue('page', '1');
	    }
	}

	function queryPrevPage() {
		var page = parseInt(getValue('page'));
		if (page == 1) {
			return;
		}
		page = page - 1;

	    setValue('page', page);
	    queryKey('page');
	    scrollToPageTop();
	}

	function queryNextPage() {
		var page = parseInt(getValue('page'));
		var allpages = parseInt(getValue('allpages'));
		if (page == allpages) {
			return;
		}
		page = page + 1;

		setValue('page', page);
	    queryKey('page');
	    scrollToPageTop();
	}

	function scrollToPageTop() {
	    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
	    if (currentScroll > 1) {
	        window.requestAnimationFrame(scrollToTop);
	        window.scrollTo(0, currentScroll - (currentScroll / 5));
	    }
	}
</script>

<style type="text/css">
    .page-tip
    {
        height: 130px;
        line-height: 130px;
        color: #949494;
        font-size: 28px;
        text-align: center;
        background-color: #F2F2F2;
    }

    .page-empty
    {
    	height: 160px;
    }

	.page-bar
	{
		width: 100%;
	    height: 100px;
	    background-color: white;
	    border-top: 1px solid #E4E4E4;
	    display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: center;
	    position: fixed;
	    bottom: 0;
	    z-index: 95;
	}

	.page-left
	{
		margin-left: 20px;
	}

	.page-right
	{
		margin-right: 20px;
	}

	.page-btn, .page-btn-invalid
	{
		-webkit-flex: none;
		height: 66px;
		line-height: 66px;
		color: #666666;
		font-size: 28px;
		padding: 0 60px 0 60px;
		border: 1px solid #666666;
		-webkit-border-radius: 10px;
	}

	.page-btn-invalid
	{
		color: #E4E4E4;
		border: 1px solid #E4E4E4;
	}

	.page-num
	{
		-webkit-flex: auto;
		color: #333333;
		font-size: 28px;
		text-align: center;
	}

	.page-this
	{
		color: #21A0F7;
		font-weight: bold;
	}

	.page-next
	{
		color: #21A0F7;
	}
</style>